/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {WebView, Platform, StyleSheet, Text, View,Image,AppRegistry} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});

var _this = null;
export default class App extends Component{
    constructor(props) {
      super(props);
      this.state={
          defaultSelected:'1',
          defaultTabHeight:52
      }
      _this = this;
    }

    onPress(data){
      var height = _this.state.defaultSelected;
      if (data){
        height = 52;
      }else {
        height = 0;
      }
      _this.setState({
        defaultTabHeight:height
      });
    }

    render(){
      return(
          <TabNavigator
              sceneStyle={{
                backgroundColor:'green',
                paddingBottom:this.state.defaultTabHeight
              }}
              tabBarStyle={{
                backgroundColor:'pink',
                height:this.state.defaultTabHeight,
                overflow:'hidden'
              }}
              tabBarShadowStyle={{
                backgroundColor:'green'
              }}
              hidesTabTouch={true}
          >
            <TabNavigator.Item
                allowFontScaling={false}
                tabStyle={{
                  backgroundColor:'blue'
                }}
                titleStyle={{
                  color:'red',
                  paddingBottom:10
                }}
                selectedTitleStyle={{
                  color:'green',
                  paddingBottom:0
                }}
                badgeText={2}
                renderBadge={
                  ()=> {
                    return (
                        <Text style={{
                          backgroundColor:'red',
                        }}>{'???'}</Text>
                    );
                  }}
                renderIcon={ ()=> {
                    return (<Image
                    source={require("./img/djjz.png")}
                    style={{
                      height:26,
                      widget:26
                    }}
                    />
                    );
                  }}
                selected={this.state.defaultSelected == 1}
                title={'大吉橘子'}
                onPress={() => {
                  this.setState({
                    defaultSelected:1
                  });
                }}
            >
                {
                  <Main1 op={this.onPress}/>
                }
            </TabNavigator.Item>

            <TabNavigator.Item
                selected={this.state.defaultSelected==2}
                title={'第二个'}
                onPress={()=>{
                  this.setState({
                    defaultSelected:2
                  });
                }}
            >
                {<Main2/>}
            </TabNavigator.Item>

            <TabNavigator.Item
                selected={this.state.defaultSelected == 3}
                title={'第三个'}
                onPress={() => {
                    this.setState({
                      defaultSelected:3
                    });
                  }}
            >
                {<Main3/>}
            </TabNavigator.Item>

          </TabNavigator>
      );
    }
}

/*type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
        <View style={styles.container}>
          <Text style={styles.welcome}>look at bot</Text>

        </View>
        /!*  <View style={styles.container}>
        {/!*<Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>*!/}
      </View>*!/
    );
  }
}*/

class Main1 extends Component{
  render (){
    return( <View style={styles.container}>
      <Text>{'main1'}</Text>
      <Text onPress={this.props.op.bind('',false)}>{'点击隐藏底部'}</Text>
      <Text onPress={this.props.op.bind('',true)}>{'点击显示底部'}</Text>
    </View>
    );
  }
}

class Main2 extends Component{
  render (){
    return(
        <View style={styles.container}>
          <Text>{'main2'}</Text>
        </View>
    );
  }
}

class Main3 extends Component{
  render (){
    return(
        <View style={styles.container}>
          <Text>{'main3'}</Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('App', () => App);
